import React, { useEffect } from "react";
import memoryUtils from "../../utils/memoryUtils.ts";
import { useNavigate, Outlet } from "react-router-dom";
import { Layout } from "antd";
import Header from "../../components/header";
import LeftNav from "../../components/left-nav";

// 引入路由

/**
 * 管理的路由组件
 */

function Admin() {
  const navigate = useNavigate();
  const user = memoryUtils.user;
  useEffect(() => {
    if (!user || !user._id) {
      navigate("/login");
    }
  }, [user, user._id]);

  //   组件搭建
  const { Footer, Sider, Content } = Layout;
  return (
    <Layout style={{ minHeight: "100%" }}>
      <Sider>
        <LeftNav />
      </Sider>
      <Layout>
        <Header></Header>
        <Content style={{ backgroundColor: "#fff", margin: 20,  }}>
          {/* 这里是你的布局组件，例如 Admin, Login 等 */}
          <Outlet />
        </Content>
        <Footer style={{ textAlign: "center", color: "#aaaaaa" }}>
          推荐使用谷歌浏览器， 可以获得更佳页面操作体验
        </Footer>
      </Layout>
    </Layout>
  );
}
export default Admin;
